<template>
	<div>
		<div class="searchHeader">
			<el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
			<el-button size="mini" type="primary" icon="el-icon-search">
				搜索用户
			</el-button>
		</div>
		<div class="adminCard">
			<el-card class="box-card" v-for="(admin,index) in adminInfos" :key="admin.id">
				<div slot="header" class="clearfix">
					<span style="color: #409eff;">昵称 ：{{admin.username}} </span>
					<el-button style="float: right;padding: 3px 0;" type="text"><i style="color: red;"
							class="el-icon-delete"></i></el-button>
				</div>
				<div class="adminInfos">
					<div class="block userface">
						<el-avatar size="small"
							src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
						</el-avatar>
					</div>
					<ul>
						<li><span>email</span> : {{admin.email}}</li>
						<li><span>用户名</span> : {{admin.nickname}}</li>
						<li><span>是否启用</span> :
							<el-switch v-model="admin.enabled" active-color="#13ce66" inactive-color="#ff4949"
								active-text="启用" inactive-text="禁用"></el-switch>
						</li>
						<li><span>是否锁定</span> :
							<el-switch v-model="admin.nonLocked" active-color="#13ce66" inactive-color="#ff4949"
								active-text="解锁" inactive-text="锁定"></el-switch>
						</li>
						<li>
							<span>用户角色</span> :
							<el-select style="width: 240px;" size="mini" v-model="admin.role" multiple filterable
								allow-create default-first-option placeholder="请选择文章标签">
								<el-option v-for="(item,index) in admin.roles" :key="item.id+''+index" :label="item.rname" :value="item.id">
								</el-option>
							</el-select>
						</li>
					</ul>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Admin",
		data: function() {
			return {
				keyWords: '',
				adminInfo: {
					id: '',
					enabled: true,
					nonLocked: true,
					rid: ''
				},
				roles: [],
				adminInfos:[]
			}
		},
		methods: {
			initAdminInfos() {
				this.$getRequest('/admin/list')
					.then(resp => {
						if (resp) {
							this.adminInfos = resp.data;
						}
					})
			}
		},
		mounted() {
			this.initAdminInfos();
		}
	}
</script>

<style>
	.searchHeader {
		margin-bottom: 10px;
	}

	.searchHeader .articleSearchText {
		width: 300px;
		margin-right: 10px;
	}

	.clearfix {
		font-size: 14px;
		user-select: none;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 400px;
		margin: 8px 10px;
	}

	.userface {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: 10px auto;
	}

	.adminInfos ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-size: 14px;
	}

	.adminInfos ul li {
		line-height: 30px;
	}

	.adminInfos ul li span {
		color: #409eff;
	}

	.adminCard {
		display: flex;
		flex-wrap: wrap;
	}
</style>
